<template>
    <div id="main">
        <div class="store-content item">
            <div class="item-box" v-if="gdetail">
                <div class="gallery-wrapper">
                    <div class="gallery">
                        <div class="thumbnail">
                            <ul>
                                <li class="on"><img src="../assets/img/goods/ss1.jpg"></li>
                                <li><img src="../assets/img/goods/ss2.jpg"></li>
                                <li><img src="../assets/img/goods/ss3.jpg"></li>
                                <li><img src="../assets/img/goods/ss4.jpg"></li>
                                <li><img src="../assets/img/goods/ss5.jpg"></li>
                            </ul>
                        </div>
                        <div class="thumb">
                            <ul>
                                <li class="on"><img src="../assets/img/goods/b1.png"></li>
                                <li><img src="../assets/img/goods/b1.png"></li>
                                <li><img src="../assets/img/goods/b1.png"></li>
                                <li><img src="../assets/img/goods/b1.png"></li>
                                <li><img src="../assets/img/goods/b1.png"></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="banner">
                    <div class="sku-custom-title">
                        <div class="params-price">
                            <span><em>¥</em><i>{{gdetail.stock_info[0].price}}</i></span>
                        </div>
                        <div class="params-info">
                            <h4>{{gdetail.stock_info[0].title}}</h4>
                            <h6>{{gdetail.stock_info[0].sub_title}}</h6>
                        </div>
                    </div>
                    <div class="sku-dynamic-params-panel">
                        <div class="sku-dynamic-params clear">
                            <span class="params-name">颜色</span>
                            <ul class="params-colors">
                                <li class="cur">
                                    <a>
                                        
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="sku-dynamic-params clear">
                            <div class="params-name">数量</div>
                            <div class="params-detail clear">
                                <div class="item-num js-select-quantity">
                                    <span class="down down-disabled">-</span>
                                    <span class="num">1</span>
                                    <span class="up up-disabled">+</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sku-status">
                        <div class="cart-operation-wrapper clearfix">
                            <span class="blue-title-btn js-add-cart"><a>加入购物车</a></span>
                            <span class="gray-title-btn"><a>现在购买</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getGoodList} from '../api/goods'
    export default {
        data() {
            return {
                gdetail: null
            }
        },
        created () {
            // console.log(this.$route.params);
            let {id} = this.$route.params  //提取路由参数
            getGoodList(id).then(res=>{
                console.log(res);
                this.gdetail = res.data[0]
            })
        },
    }
</script>

<style lang="less" scoped>
@import url('../assets/css/item.css');
</style>